<template>
  <div class="shop-manage">
    <div class="fl">
      <ShopListMenu @emitShopId="emitShopId" />
    </div>

    <div v-if="shopId" v-loading="loading" class="left-container">
      <!-- 标题 tab  -->
      <div class="head">
        <app-main-title :title="shopName?shopName:''" />
        <div class="tab">
          <el-tabs v-model="tabName">
            <el-tab-pane
              v-if="!$store.getters.banBtnList.includes('MCH_TAB_FULL_DAY_BASIC_SETUP')"
              label="全日房"
              name="fullDayRoom"
            />
            <el-tab-pane
              v-if="!$store.getters.banBtnList.includes('MCH_TAB_HOUR_ROOM_BASIC_SETUP')"
              label="钟点房"
              name="hourRoom"
            />
            <el-tab-pane
              v-if="!$store.getters.banBtnList.includes('MCH_TAB_KTV_BASIC_SETUP')"
              label="KTV"
              name="ktvRoom"
            />
            <el-tab-pane label="设施/服务" name="FacilityAndService" />
            <!-- <el-tab-pane label="店铺介绍" name="Introduce" /> -->
          </el-tabs>
        </div>
      </div>

      <div v-if="configForm" class="content app-main-content-box">
        <RoomConfig
          v-if="tabName==='fullDayRoom'||tabName==='ktvRoom'||tabName==='hourRoom'"
          :config-form.sync="configForm"
          :tab-name="tabName"
        />
        <FacilityAndService
          v-if="tabName==='FacilityAndService'"
          :config-form.sync="configForm"
          :tab-name="tabName"
        />
        <!-- <ShopIntroduce
          v-if="tabName==='Introduce'"
          :config-form.sync="configForm"
          :tab-name="tabName"
        /> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getShopManageConfig } from '../../api/shop'
import RoomConfig from './components/RoomConfig'
import FacilityAndService from './components/FacilityAndService'
// import ShopIntroduce from './components/ShopIntroduce'
export default {
  components: {
    RoomConfig,
    FacilityAndService
  },
  data() {
    return {
      // 配置
      tabName: 'fullDayRoom',
      // 状态
      loading: false,
      // 数据
      shopId: '',
      shopName: '',
      configForm: ''
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  mounted() {
    if (
      !this.$store.getters.banBtnList.includes('MCH_TAB_FULL_DAY_BASIC_SETUP')
    ) {
      this.tabName = 'fullDayRoom'
    } else if (
      !this.$store.getters.banBtnList.includes('MCH_TAB_HOUR_ROOM_BASIC_SETUP')
    ) {
      this.tabName = 'hourRoom'
    } else if (
      !this.$store.getters.banBtnList.includes('MCH_TAB_KTV_BASIC_SETUP')
    ) {
      this.tabName = 'ktvRoom'
    }
  },
  methods: {
    /**
       * 获取数据
       */
    // 获取配置
    initData() {
      this.loading = true
      this.configForm = ''
      getShopManageConfig({ shopId: this.shopId })
        .then(res => {
          this.resetData(res.data)
        })
        .catch(() => {
          this.loading = false
        })
    },

    // 格式化数据
    resetData(data) {
      // 最晚确定时间
      data.fullDayRoom.latestConfirmTime =
          data.fullDayRoom.latestConfirmTime || ''
      data.ktvRoom.latestConfirmTime = data.ktvRoom.latestConfirmTime || ''
      data.hourRoom.latestConfirmTime = data.hourRoom.latestConfirmTime || ''
      // 取消费用占订单金额百分比
      data.fullDayRoom.cancelChargeRatio =
          data.fullDayRoom.cancelChargeRatio || ''
      data.ktvRoom.cancelChargeRatio = data.ktvRoom.cancelChargeRatio || ''
      data.hourRoom.cancelChargeRatio = data.hourRoom.cancelChargeRatio || ''
      //  在线支付渠道
      data.fullDayRoom.payChannels = data.fullDayRoom.payChannels
        ? data.fullDayRoom.payChannels.split(',')
        : []
      data.ktvRoom.payChannels = data.ktvRoom.payChannels
        ? data.ktvRoom.payChannels.split(',')
        : []
      data.hourRoom.payChannels = data.hourRoom.payChannels
        ? data.hourRoom.payChannels.split(',')
        : []
        //  最早到店时间 最晚离店时间
      data.fullDayRoom.earliestCheckTime = data.fullDayRoom.earliestCheckTime
        ? data.fullDayRoom.earliestCheckTime
        : '12:00'
      data.fullDayRoom.latestDepartureTime = data.fullDayRoom
        .latestDepartureTime
        ? data.fullDayRoom.latestDepartureTime
        : '14:00'
      //  设施 服务
      data.supplyFacility = data.supplyFacility
        ? JSON.parse(data.supplyFacility)
        : []
      data.supplyService = data.supplyService
        ? JSON.parse(data.supplyService)
        : []
      data.imageList = data.imageList.map((value, index) => {
        return {
          response: { code: 0, data: { path: value } },
          url: this.fileBaseUrl + value
        }
      })

      this.configForm = Object.assign({}, data)
      this.loading = false
    },

    /**
       * 按钮组
       */
    // 选中门店
    emitShopId(item) {
      this.shopId = item.shopId
      this.shopName = item.shopName
      this.initData()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .shop-manage {
    /* 左边 */
    .left-container {
      overflow: hidden;
    }

    /*  头部 */
    .head {
      padding: 24px 30px 0;
      border-radius: 5px;
      background-color: #fff;
      /* tab */
      .tab ::v-deep {
        .el-tabs__header {
          margin-bottom: 0;
          background-color: #fff;
          border-radius: 0 0 5px 5px;
        }
        .el-tabs__nav-wrap::after {
          background-color: #fff;
        }
        .el-tabs__active-bar {
          height: 4px;
        }
      }
    }

    /* 内容 */
    .content {
      margin-top: 10px;
    }
  }
</style>
